﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/attribute</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		console.log( "jQuery version: " + $.fn.jquery );

        </script>
    </head>
    <body>
        <h1>jQuery/callbacks部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">jQuery.Callbacks()</td>
                <td>创建callbacks manager. 可以指定的入参,  once, memory, unique, stopOnFalse.</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.add()</td>
                <td>添加callback func or func array. </td>
            </tr>
            <tr>
                <td class="syntax">callbacks.disable()</td>
                <td>callbacks禁用.</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.disabled()</td>
                <td>return true if callbacks已经禁用.</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.empty()</td>
                <td>清空callbacks中所有callback funcs</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.fire()</td>
                <td>调用每一个callback func. 可以指定入参</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.fireWith()</td>
                <td>相较fire(), 不同的是可以指定context, 即func.apply(context,....)</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.fired()</td>
                <td>true if 已经fire</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.has()</td>
                <td>callbacks中是否包含有指定的callback func.</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.remove()</td>
                <td>删除指定的callback func.</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.lock()</td>
                <td>锁定. 随后fire()无效. 但仍可以add().</td>
            </tr>
            <tr>
                <td class="syntax">callbacks.locked()</td>
                <td>true if locked. </td>
            </tr>
		</table>
		<p>注意, 创建callbacks时若指定的是"memory", 那么lock()后再执行add(), 则新加的callback func会以lock前最后一次fire()的入参执行一次.</p>
		<p>disable()和lock()没有对应的逆方法, 故无法解除.</p>
		<p>callbacks的应用场景有$.ajax()和$.Deferred()</p>
    <hr/>
    
    请观察console输出.

	<p id="res1">待定颜色1</p>
	<p id="res2">待定颜色2</p>
	<p id="res3">待定颜色3</p>
	<script>
        function fn1(clsName){
            console.log("set 待定颜色1 "+clsName);
            $("#res1").addClass(clsName);
        }
        function fn2(clsName){
            console.log("set 待定颜色2 "+clsName);
            $("#res2").addClass(clsName);
        }
        function fn3(clsName){
            console.log("set 待定颜色3 "+clsName);
            $("#res3").addClass(clsName);
        }

        var cbs = $.Callbacks("memory");
        cbs.add(fn1);
        cbs.add(fn2);
        cbs.fire("colorBlue");
        cbs.lock();
        cbs.fire("colorRed");   //因lock, 故无效. 
        cbs.add(fn3);           //fn3会以lock前的参数"colorBlue"执行一次.

	</script>

    </body>
</html>
